<template>
  <div @keyup.enter="getData()">
    <el-form class="query-form" @submit.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input v-model="params.ind_name" placeholder="产业名查询" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.ind_category_name" placeholder="产业类型" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.ins_year" type="number" placeholder="年份" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button icon="el-icon-upload" @click="importVisible = true">导入险种</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button icon="el-icon-plus" @click="handleEdit()">添加险种</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <c-form-dialog
      ref="form"
      :visible.sync="formVisible"
      :form-items="formItems"
      :form-data="formData"
      :table-name="tableName"
      :table-id="tableId"
      :service="serviceName"
      @success="getData(params.index)"
    ></c-form-dialog>

    <import-excel
      :visible.sync="importVisible"
      title="导入险种信息"
      :post-api="importUrl"
      excel-template="/static/files/险种导入模板.xlsx"
      @success="handleImportSucess"
    ></import-excel>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import SelectAddress from '@/components/select/SelectAddress'
import SelectProductCate from '@/components/select/SelectProductCate'
import ImportExcel from '@/components/ImportExcel'
export default {
  components: {
    ImportExcel,
  },
  props: {},
  data() {
    return {
      // 导入
      importVisible: false,
      importUrl: '',
      loading: false,
      params: {
        index: 1,
        size: 15,
        ind_category_name: '',
        ind_name: '',
        ins_year: '',
        'agency_id.eq': '',
      },
      serviceName: 'insurance',
      tableName: 'insurance_class',
      tableData: [],
      totalCount: 0,
      tableColumns: [
        { attrs: { label: '产业名', prop: 'ind_name' } },
        { attrs: { label: '产业类型', prop: 'ind_category_name' } },
        { attrs: { label: '险种类型', prop: 'ins_class_name' } },
        { attrs: { label: '年份', prop: 'ins_year' } },
        { attrs: { label: '地域', prop: 'address_code_name' } },
        { attrs: { label: '保费费率', prop: 'ins_fee' } },
        { attrs: { label: '保险责任', prop: 'ins_res' } },
        { attrs: { label: '单位保额', prop: 'ins_amount' } },
        { attrs: { label: '单位', prop: 'unit' } },
        {
          attrs: { label: '中央补贴', prop: 'center_fee_rate' },
          process: v => (v ? `${v}%` : '-'),
        },
        { attrs: { label: '省级补贴', prop: 'pro_fee_rate' } },
        { attrs: { label: '县级补贴', prop: 'county_fee_rate' } },
        { attrs: { label: '地市补贴', prop: 'city_fee_rate' } },
        { attrs: { label: '其它补贴', prop: 'other_fee_rate' } },
        { attrs: { label: '自缴比例', prop: 'self_fee_rate' } },
        {
          attrs: { label: '操作', align: 'center', minWidth: '100px' },
          operations: [
            { content: '编辑险种', icon: 'fa fa-edit', event: this.handleEdit },
            {
              content: '删除险种',
              icon: 'fa fa-trash',
              attrs: { class: 'text-danger py-0 px-2' },
              event: this.handleDelete,
            },
          ],
        },
      ],

      //
      tableId: '',
      formPrimaryKey: 'insurance_class_id',
      formVisible: false,
      formData: {},
      formItems: [
        {
          tag: 'input',
          itemAttrs: {
            label: '产业名',
            rules: [{ required: true, message: '请输入产业名', trigger: 'blur' }],
          },
          attrs: { key: 'ind_name', value: '', placeholder: '请输入产业名' },
        },
        {
          tag: SelectProductCate,
          itemAttrs: { label: '产业类型' },
          attrs: {
            key: 'ind_category',
            value: '',
            placeholder: '请选择产业类型',
            class: 'form-control-ml',
          },
          listeners: {
            change: (v, n) =>
              this.$refs.form.setAttrs('ind_category_name', {
                value: n.length ? n[n.length - 1] : '',
              }),
          },
        },
        {
          tag: 'input',
          itemAttrs: { label: '产业类型名称' },
          attrs: { key: 'ind_category_name', value: '' },
          ifShow: false,
        },
        {
          tag: SelectAddress,
          itemAttrs: { label: '区域' },
          attrs: { key: 'address_code', value: '', class: 'form-control-ml' },
          listeners: {
            change: (v, n) =>
              this.$refs.form.setAttrs('address_code_name', {
                value: n.length ? n[n.length - 1] : '',
              }),
          },
        },
        {
          tag: 'input',
          itemAttrs: { label: '区域名称' },
          attrs: { key: 'address_code_name', value: '' },
          ifShow: false,
        },
        {
          tag: 'date',
          itemAttrs: { label: '年份' },
          attrs: {
            key: 'ins_year',
            value: '',
            type: 'year',
            placeholder: '选择年份',
            valueFormat: 'yyyy',
          },
        },
        {
          tag: 'input',
          itemAttrs: { label: '险种类型' },
          attrs: { key: 'ins_class_name', value: '', placeholder: '请输入险种类型' },
        },
        {
          tag: 'input',
          itemAttrs: { label: '保险责任' },
          attrs: { key: 'ins_res', value: '', placeholder: '请输入保险责任' },
        },
        {
          tag: 'number',
          itemAttrs: { label: '单位保额' },
          attrs: { key: 'ins_amount', value: '' },
        },
        {
          tag: 'number',
          itemAttrs: { label: '单位' },
          attrs: { key: 'unit', value: '' },
        },
        {
          tag: 'number',
          itemAttrs: { label: '保费费率' },
          attrs: { key: 'ins_fee', value: '' },
          tagSlots: [{ name: 'append', slot: '%' }],
        },
        {
          tag: 'number',
          itemAttrs: { label: '中央补贴' },
          attrs: { key: 'center_fee_rate', value: '' },
          tagSlots: [{ name: 'append', slot: '%' }],
        },
        {
          tag: 'number',
          itemAttrs: { label: '省级补贴' },
          attrs: { key: 'pro_fee_rate', value: '' },
          tagSlots: [{ name: 'append', slot: '%' }],
        },
        {
          tag: 'number',
          itemAttrs: { label: '县级补贴' },
          attrs: { key: 'county_fee_rate', value: '' },
          tagSlots: [{ name: 'append', slot: '%' }],
        },
        {
          tag: 'number',
          itemAttrs: { label: '地市补贴' },
          attrs: { key: 'city_fee_rate', value: '' },
          tagSlots: [{ name: 'append', slot: '%' }],
        },
        {
          tag: 'number',
          itemAttrs: { label: '其它补贴' },
          attrs: { key: 'other_fee_rate', value: '' },
          tagSlots: [{ name: 'append', slot: '%' }],
        },
        {
          tag: 'number',
          itemAttrs: { label: '自缴比例' },
          attrs: { key: 'self_fee_rate', value: '' },
          tagSlots: [{ name: 'append', slot: '%' }],
        },
        {
          tag: 'input',
          itemAttrs: { label: '机构id' },
          attrs: { key: 'agency_id', value: '' },
          ifShow: false,
          getValue: () => this.clientId,
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.params['agency_id.eq'] = this.clientId
    const importWhere = encodeURIComponent(`"${this.tableName}.agency_id".eq(${this.clientId})`)
    this.importUrl = `/api/${this.serviceName}/import/?importKey=${this.tableName}_template&where=${importWhere}`
    this.getData()
  },
  mounted() {},
  methods: {
    async getData(index = 1) {
      this.params.index = index
      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.serviceName, this.tableName, this.params, { create_time: 'asc' })
      )
      this.loading = false
      this.tableData = (res && res.data && res.data.data) || []
      this.totalCount = (res && res.data && res.data.totalCount) || 0
    },

    handleEdit(row) {
      this.tableId = (row && row[this.formPrimaryKey]) || ''
      this.formData = row || {}
      this.formVisible = true
    },

    handleDelete(row) {
      this.$msgbox({
        title: '提示',
        message: `确定删除险种：${row.ind_name}?`,
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonText = '删除中...'
            instance.confirmButtonLoading = true
            const [res, err] = await this.$utils.promise(
              this.$api.deleteData(this.serviceName, this.tableName, row[this.formPrimaryKey])
            )
            instance.confirmButtonLoading = false
            instance.confirmButtonText = '确定'

            if (res) {
              this.$message.success('删除成功！')
              this.getData()
            } else {
              this.$message.error(`删除失败！${err.status}`)
            }

            done()
          } else {
            done()
          }
        },
      }).catch(() => {})
    },
    // 导入
    handleImportSucess() {
      this.getData()
      this.importVisible = false
    },
  },
}
</script>
<style lang="scss" scoped></style>
